<template>
  <view :style="themeColor">
    <view class="page">
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myWode_flex_0">
        <view class='flex flex-wrap align-center justify-end myWode_fd0_0'>
          <image class='myWode_fd0_0_c0' mode="aspectFit" :src='STATIC_URL+"110.png"' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/wode/setUp/setUp`"></image>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myWode_flex_1">
        <view class='flex flex-wrap align-start myWode_fd1_0' @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/wode/personalData/personalData`" v-if=" isLogin===true">
          <image class='myWode_fd1_0_c0' mode="aspectFit" :src='userInfo.avatar'></image>
          <view class='flex flex-direction flex-wrap align-start flex-sub'>
            <view class='flex flex-wrap align-center'>
              <text class='myWode_fd1_0_c1_c0_c0'>{{userInfo.nickname}}</text>
              <image class='myWode_fd1_0_c1_c0_c1' v-if="userInfo.gender==1" mode="aspectFill"
                :src='STATIC_URL+"125.png"'></image>
              <image class='myWode_fd1_0_c1_c0_c1' v-if="userInfo.gender==2" mode="aspectFill"
                :src='STATIC_URL+"179.png"'></image>
            </view>
            <view class='flex flex-wrap align-center myWode_fd1_0_c1_c1'>
              <view class="flex align-center" v-if="userInfo.certified==2">
                <image class='myWode_fd1_0_c1_c1_c0' mode="aspectFit" :src='STATIC_URL+"5.png"'></image>
                <text class='myWode_fd1_0_c1_c1_c1'>已实名</text>
              </view>
              <view class="flex align-center" v-if="userInfo.is_vip">
                <image class='myWode_fd1_0_c1_c1_c2' mode="aspectFit" :src='STATIC_URL+"6.png"'></image>
                <text class='myWode_fd1_0_c1_c1_c1'>VIP会员</text>
              </view>

            </view>
            <view class='flex flex-wrap align-center myWode_fd1_0_c1_c2'>
              <text class='myWode_fd1_0_c1_c2_c0'>{{userInfo.shengfen}}</text>
              <text class='myWode_fd1_0_c1_c2_c1' v-if="userInfo.chengshi">|</text>
              <text class='myWode_fd1_0_c1_c2_c0'>{{userInfo.chengshi}}</text>
              <text class='myWode_fd1_0_c1_c2_c1' v-if="userInfo.diqu">|</text>
              <text class='myWode_fd1_0_c1_c2_c0'>{{userInfo.diqu}}</text>
            </view>
            <view class='flex flex-wrap align-center myWode_fd1_0_c1_c3'>
              <text class='myWode_fd1_0_c1_c2_c0'>{{userInfo._mobile}}</text>
            </view>
            <view class='flex flex-wrap align-center myWode_fd1_0_c1_c4' v-if="userInfo.is_vip">
              <text class='myWode_fd1_0_c1_c4_c0'>您的会员截止到</text>
              <text class='myWode_fd1_0_c1_c4_c0'>{{userInfo.vipguoqishijian}}</text>
              <text class='myWode_fd1_0_c1_c4_c0'>到期</text>
            </view>
          </view>
        </view>
        <view class='flex flex-wrap align-center myWode_fd1_0' @tap.stop="toLoginDiy()" v-if=" isLogin===false">
          <image class='myWode_fd1_0_c0' mode="aspectFit" :src='STATIC_URL+"13.png"'></image>
          <text class='myWode_fd1_1_c1'>请登录</text>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myWode_flex_2">
        <view class='flex flex-wrap align-center justify-between myWode_fd2_0' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/wode/rurchaseMembership/rurchaseMembership`">
          <view class='flex flex-direction flex-wrap align-start'>
            <image class='myWode_fd2_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"124.png"'></image>
            <text class='myWode_fd2_0_c0_c1'>VIP会员费3.5折限时优惠进行时</text>
          </view>
          <view class='flex flex-wrap align-center justify-center myWode_fd2_0_c1'>
            <text class='myWode_fd2_0_c1_c0'>立即抢</text>
            <image class='myWode_fd2_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"123.png"'></image>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myWode_flex_3">
        <view class='flex flex-wrap align-center justify-between myWode_fd3_0'>
          <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/mygrainStation/mygrainStation`">
            <image class='myWode_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"111.png"'></image>
            <text class='myWode_fd3_0_c0_c1'>我的粮站</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/myPosts/myPosts`">
            <image class='myWode_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"115.png"'></image>
            <text class='myWode_fd3_0_c0_c1'>我的发布</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/mybusinessSituation/mybusinessSituation`">
            <image class='myWode_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"114.png"'></image>
            <text class='myWode_fd3_0_c0_c1'>我的账本</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/myOrder/myOrder`">
            <image class='myWode_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"113.png"'></image>
            <text class='myWode_fd3_0_c0_c1'>我的订单</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/JoinUS/JoinUS`">
            <image class='myWode_fd3_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"112.png"'></image>
            <text class='myWode_fd3_0_c0_c1'>联系我们</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myWode_flex_4">
        <view class='flex flex-direction flex-wrap align-stretch myWode_fd4_0'>
          <view class='flex flex-wrap align-center myWode_fd4_0_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/haveContacted/haveContacted`">
            <image class='myWode_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"117.png"'></image>
            <text class='myWode_fd4_0_c0_c1'>我联系过</text>
            <image class='myWode_fd4_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"116.png"'></image>
          </view>
          <view class='flex flex-wrap align-center myWode_fd4_0_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/aboutUs/aboutUs`">
            <image class='myWode_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"118.png"'></image>
            <text class='myWode_fd4_0_c0_c1'>关于我们</text>
            <image class='myWode_fd4_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"116.png"'></image>
          </view>
          <view class='flex flex-wrap align-center myWode_fd4_0_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/agreementDeclaration/agreementDeclaration`">
            <image class='myWode_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"119.png"'></image>
            <text class='myWode_fd4_0_c0_c1'>协议和声明</text>
            <image class='myWode_fd4_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"116.png"'></image>
          </view>
          <view class='flex flex-wrap align-center myWode_fd4_0_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/feedBack/feedBack`">
            <image class='myWode_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"120.png"'></image>
            <text class='myWode_fd4_0_c0_c1'>意见反馈</text>
            <image class='myWode_fd4_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"116.png"'></image>
          </view>
          <view class='flex flex-wrap align-center myWode_fd4_0_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/wode/setUp/setUp`">
            <image class='myWode_fd4_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"121.png"'></image>
            <text class='myWode_fd4_0_c0_c1'>设置</text>
            <image class='myWode_fd4_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"116.png"'></image>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center myWode_flex_5" @tap.stop="handleJumpDiy"
        data-type="navigateTo" :data-url="`/pages/wode/JoinUS/JoinUS`">
        <view class='flex flex-direction flex-wrap align-center justify-center myWode_fd5_0'>
          <text class='fu-iconfont2  myWode_fd5_0_c0'>&#xe6a5;</text>
          <text class='myWode_fd5_0_c1'>人工客服</text>
        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>
    <fuTabbr :intopath="intopath"></fuTabbr>
  </view>
</template>
<script>
  import fuTabbr from '@/components/tabbar/tabbar.vue'
  export default {
    components: {
      fuTabbr
    },


    data() {
      return {
        intopath: 4,
        userInfo: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      if (this.isLogin) {
        this.getData()
      }
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      getData() {
        this.$api.post(global.apiUrls.post5c78c4772da97).then(res => {
          if (res.data.code == 1) {
            this.userInfo = res.data.data
          }
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('177.png')) no-repeat;
    background-size: 100% auto;
    padding-bottom: 120rpx;
  }

  .myWode_flex_0 {
    padding: 72rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd0_0_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd0_0 {
    padding: 0rpx 34rpx 0rpx 34rpx;
  }

  .myWode_flex_1 {
    margin: 88rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd1_1_c1 {
    color: #333;
    font-size: 45rpx;
    font-weight: 700;
  }

  .myWode_fd1_0_c1_c4_c0 {
    color: #D1682D;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .myWode_fd1_0_c1_c4 {
    margin: 12rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd1_0_c1_c3 {
    margin: 8rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd1_0_c1_c2_c1 {
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin: 0rpx 12rpx 0rpx 12rpx;
  }

  .myWode_fd1_0_c1_c2_c0 {
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .myWode_fd1_0_c1_c2 {
    margin: 17rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd1_0_c1_c1_c2 {
    width: 36rpx;
    height: 36rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 12rpx 0rpx 20rpx;
  }

  .myWode_fd1_0_c1_c1_c1 {
    color: #C86105;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .myWode_fd1_0_c1_c1_c0 {
    width: 36rpx;
    height: 36rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 12rpx 0rpx 0rpx;
  }

  .myWode_fd1_0_c1_c1 {
    margin: 14rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd1_0_c1_c0_c1 {
    width: 26rpx;
    height: 26rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd1_0_c1_c0_c0 {
    margin: 0rpx 20rpx 0rpx 0rpx;
    color: #101010;
    font-size: 40rpx;
    font-weight: 700;
    line-height: 56rpx;
  }

  .myWode_fd1_0_c0 {
    width: 120rpx;
    height: 120rpx;
    border-radius: 100rpx;
    margin: 0rpx 29rpx 0rpx 0rpx;
  }

  .myWode_fd1_0 {
    margin: 0rpx 40rpx 0rpx 40rpx;
  }

  .myWode_flex_2 {
    margin: 27rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd2_0_c1_c1 {
    width: 30rpx;
    height: 30rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 10rpx;
  }

  .myWode_fd2_0_c1_c0 {
    color: #5E3F13;
    font-size: 28rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .myWode_fd2_0_c1 {
    background: linear-gradient(272deg, #FBEBD1 0%, #FAE4AB 100%);
    width: 204rpx;
    height: 64rpx;
    background-size: 100% auto;
    border-radius: 33rpx;
  }

  .myWode_fd2_0_c0_c1 {
    margin: 12rpx 0rpx 0rpx 0rpx;
    color: #FFE7D2;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .myWode_fd2_0_c0_c0 {
    width: 298rpx;
    height: 62rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd2_0 {
    background: url(image-path('122.png')) no-repeat;
    margin: 0rpx 30rpx 0rpx 30rpx;
    background-size: 100% 100%;
    height: 160rpx;
    padding: 0rpx 24rpx 0rpx 31rpx;
  }

  .myWode_flex_3 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd3_0_c0_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
    color: #464A57;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .myWode_fd3_0_c0_c0 {
    width: 48rpx;
    height: 48rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd3_0 {
    background: rgba(255, 255, 255, 1);
    margin: 0rpx 30rpx 0rpx 30rpx;
    padding: 32rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
  }

  .myWode_flex_4 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd4_0_c0_c2 {
    width: 32rpx;
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx auto;
  }

  .myWode_fd4_0_c0_c1 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 36rpx;
  }

  .myWode_fd4_0_c0_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .myWode_fd4_0_c0 {
    padding: 28rpx 0rpx 28rpx 0rpx;
  }

  .myWode_fd4_0 {
    background: rgba(255, 255, 255, 1);
    margin: 0rpx 30rpx 0rpx 30rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 0rpx 24rpx 0rpx 33rpx;
  }

  .myWode_flex_5 {
    background: rgba(255, 255, 255, 1);
    position: fixed;
    right: 11rpx;
    bottom: calc(10% + var(--window-bottom));
    z-index: 2;
    background-size: 100% auto;
    border-radius: 50%;
  }

  .myWode_fd5_0_c1 {
    color: #2568AE;
    font-size: 22rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin: 8rpx 0rpx 0rpx 0rpx;
  }

  .myWode_fd5_0_c0 {
    font-size: 45rpx;
    color: rgba(37, 104, 174, 1);
  }

  .myWode_fd5_0 {
    width: 126rpx;
    height: 126rpx;
    border-radius: 50%;
    box-shadow: 0rpx 3rpx 8rpx 1rpx rgba(103, 117, 133, 0.3);
  }
</style>
